<template>
  <div class="refund-create">
    <div class="page-header">
      <h2>申请退款</h2>
      <el-button @click="$router.back()">返回</el-button>
    </div>

    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="120px"
      class="refund-form"
    >
      <el-form-item label="订单号" prop="orderNo">
        <el-input v-model="form.orderNo" placeholder="请输入订单号" />
      </el-form-item>

      <el-form-item label="退款金额" prop="amount">
        <el-input-number
          v-model="form.amount"
          :precision="2"
          :step="0.1"
          :min="0"
          placeholder="请输入退款金额"
        />
      </el-form-item>

      <el-form-item label="退款原因" prop="reason">
        <el-input
          v-model="form.reason"
          type="textarea"
          :rows="3"
          placeholder="请输入退款原因"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit">提交申请</el-button>
        <el-button @click="$router.back()">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'

const router = useRouter()
const formRef = ref(null)

const form = ref({
  orderNo: '',
  amount: 0,
  reason: ''
})

const rules = {
  orderNo: [
    { required: true, message: '请输入订单号', trigger: 'blur' }
  ],
  amount: [
    { required: true, message: '请输入退款金额', trigger: 'blur' },
    { type: 'number', min: 0.01, message: '退款金额必须大于0', trigger: 'blur' }
  ],
  reason: [
    { required: true, message: '请输入退款原因', trigger: 'blur' },
    { min: 2, max: 200, message: '退款原因长度在2到200个字符之间', trigger: 'blur' }
  ]
}

const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    const response = await axios.post('/api/refund/create', form.value)
    ElMessage.success('申请提交成功')
    router.push('/refund')
  } catch (error) {
    if (error.response) {
      ElMessage.error(error.response.data.message || '申请提交失败')
    }
  }
}
</script>

<style scoped>
.refund-create {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.refund-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style> 